<template>
	
	<li>
	   <label>
		 <input type="checkbox" v-model:checked='job.finish'/>
		 <span>{{job.name}}</span>
	   </label>
	   <button @click="delMe" class="btn btn-danger">删除</button>
	 </li>
	
</template>

<script>
	export default {
		name: 'Job',
		props: ['job','delJob'],
		data() {
			return {
		
			}
		},
		methods: {
			// 删除时调用，JobList的删除,而JobList则会调用 App的删除
			delMe(){
				if(confirm("确认删除吗?"))
					this.delJob(this.job.id)
			}
		}
	}
</script>

<style scoped>
	/*item*/
	li {
	  list-style: none;
	  height: 36px;
	  line-height: 36px;
	  padding: 0 5px;
	  border-bottom: 1px solid #ddd;
	}
	
	li label {
	  float: left;
	  cursor: pointer;
	}
	
	li label li input {
	  vertical-align: middle;
	  margin-right: 6px;
	  position: relative;
	  top: -1px;
	}
	
	li button{
	  float: right;
	  display: none;
	  margin-top: 3px;
	}
	
	li:before {
	  content: initial;
	}
	
	li:last-child {
	  border-bottom: none;
	}
	
	li:hover button{
		display: block;
	}
	
	li:hover{
		background-color: pink;
	}
</style>